.profile {
  padding: 4em 1em 1em 1em;
  position: relative;
  overflow: hidden;
}

.profile-heading{
  max-width: 1000px;
  margin: 0 auto;
}

.profile-inner{
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  @include vendor-property('transition', 'transform .5s');

  .profile-data-form{
    @include vendor-property('transition', 'opacity .5s');
    opacity: 1;
  }

  .password-form{
    opacity: 0;
    @include vendor-property('transition', 'opacity .5s');
    @include vendor-property('transform', 'translate3d(150%, 0, 0)');
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }


  &.password-active{
    @include vendor-property('transform', 'translate3d(-150%, 0, 0)');

    .profile-data-form{
      opacity: 0;
    }
    .password-form{
      opacity: 1;
    }
  }

}

.subprofiles-table {
 width: 100%;

  thead {
    border-bottom: 1px solid white;
  }

  tr{
    height: 30px;
  }

  td,th{
    min-width: 25%;
    max-width: 25%;
    div {
      display: flex;
      justify-content: center;
      width: 100%;

      button {
        height: 25px;
        padding: 0 10px;
      }
    }

    padding: 3px 0;
  }

  tbody {
    tr:hover {
      background-color: #6a6a6a;
    }
  }
}
